<template>
	<view>
		<view class="top">
			<view class="top_adr" @click="fanhui()">
				<image src="../../static/img/turn2.png" mode="widthFix"></image>
			</view>
			<text class="top_tit t25">红包管理</text>
			<view class="top_text t12" @click="hongbao()" v-if="type==20">设置</view>
			<view class="top_text top_text1 t12" @click="tongji()" v-if="type==20">昨日统计</view>
		</view>
		<view class="bai"></view>
		<view class="cy_list" v-for="(item,index) in list" :key="index" @click="listmore(item.id)">
			<view class="cy_li">
				<text class="cy_li_tit t22" v-if="item.plat==4">支付宝红包</text>
				<text class="cy_li_tit t22" v-if="item.plat==3">微信红包</text>
				<text class="cy_li_tit t26 tri" v-if="item.lastAmount==0">已完成</text>
				<text class="cy_li_tit t20 tri" v-if="item.lastAmount!=0">{{item.dayAmount/100}}元</text>
				<text class="cy_li_info t5" v-if="item.userNickName">收款人：{{item.userNickName}}</text>
				<view class="cy_li_info t5"><text class="cy_li_i">总金额：{{item.totalAmount/100}}元</text>|<text class="cy_li_i">剩余：{{item.lastAmount/100}}元</text>|<text class="cy_li_i">总天数：{{item.dayNum}}天</text><image src="../../static/img/turn.png" mode="widthFix" class="cy_li_info_img"></image></view>				
			<!-- 	<text class="cy_li_tit t20 tri">总金额：{{item.totalAmount/100}}元</text>
				<text class="cy_li_tit t20 tri">总金额：{{item.totalAmount/100}}元</text> -->
				<!-- <text class="cy_li_info t1">{{item.time}}</text> -->
			</view>
		</view>
		<view class="zanwu" v-show="jiazai" style="padding: 4vw 0;"><text class="t7">{{more}}</text></view>
		<view class="zanwu" v-show="zanwu" style="padding: 4vw 0;">
			<image src="../../static/img/kong.png" mode="widthFix" style="margin-left: 35vw;"></image><text class="t8">{{wu}}</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				mainid: '',
				list: [],
				pages: 1,
				ismore: true,
				more: '加载更多',
				jiazai: false,
				wu: "暂无数据",
				zanwu: false,
				type:'',
			}
		},
		onLoad() {
			var _this = this;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					console.log('user:',res);
					_this.type=res.data.type;
					_this.mainid = res.data.id;
					_this.hblist();
				}
			});
		},

		// 监听触底
		onReachBottom() {
			//阻止重复加载
			if (this.ismore == false) {
				return;
			}
			this.pages++;
			this.hblist();

		},

		methods: {
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			hongbao() {
				uni.navigateTo({
					url: '/pages/hongbao/hongbao'
				});
			},
			tongji(){
				uni.navigateTo({
					url: '/pages/hongbao/tongji'
				});
			},
			listmore(id){
				uni.navigateTo({
					url: '/pages/mingxi/mingxi_hongbao_log?id='+id
				});
			},
			hblist() {

				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'mch/redPage/' + this.mainid+'/' + this.pages, //仅为示例，并非真实接口地址。
					method: 'post',
					data: {
						id: this.mainid, //	用户ID（mainId）		true	string
						page: this.pages, //	page
					},
					success: (res) => {
						uni.hideLoading(); //关闭加载动画
						console.log("红包管理页面列表: ",res);
						if (res.data.status == '200') {

							if (res.data.data.pages==this.pages) {
								this.more = "没有更多数据了";
								this.jiazai = true;
								this.zanwu = false;
								this.ismore = false;
							} else if (res.data.data.pages == 0) {
								this.more = "暂无数据";
								this.jiazai = false;
								this.zanwu = true;
								this.ismore = false;
							} else {
								this.more = "加载更多";
								this.jiazai = true;
								this.zanwu = false;
								this.ismore = true;
							}
											if (this.pages == 1) {

												this.list = res.data.data.records;
											} else {
												for (var i = 0; i < res.data.data.length; i++) {
													this.list.push(res.data.data.records);
												}
											}
						}
					},
					fail: (error) => {
						uni.hideLoading();
						// this.checks = true
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
						console.log(error)
					}
				});
			}
		}
	}
</script>

<style>.top {
		width: 100%;
		height: 20vw;
		position: fixed;
		top: 0vw;
		left: 0;
		padding-top: 8.5vw;
		background: #F8F8F8;
		z-index: 999;
	}

	.top_adr {
		width: auto;
		height: 12vw;
		float: left;
		position: absolute;
		top: 8vw;
		left: 0;
		padding-left: 5vw;
	}

	.top_adr text {
		width: 15vw;
		overflow: hidden;
		height: 12vw;
		position: relative;
		line-height: 12vw;
		float: left;
	}

	.top_adr image {
		width: 2.5vw;
		margin-top: 3.5vw;
		float: left;
		margin-right: 2vw;
	}

	.bai {
		width: 100%;
		height: 22vw;
		display: block;
		float: left;
	}

	.top_tit {
		width: 50%;
		height: 12vw;
		line-height: 12vw;
		text-align: center;
		float: left;
	}

	.top_text {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		position: absolute;
		top: 11vw;
		right: 5vw;
		border:1px solid #F1C75E;
		border-radius: 2vw;
		padding: 0 2vw;
	}
	
	.top_text1{
		position: absolute;
		top: 11vw;
		right: 20vw;
	}

	.loading {
		text-align: center;
		line-height: 10vw;
	}

	.cy_user {
		width: 90%;
		height: auto;
		display: block;
		float: left;
		margin: 2vw 5%;
		background: -webkit-linear-gradient(#8A3DE2, #9C4BF9);
		background: -o-linear-gradient(#8A3DE2, #9C4BF9);
		background: -moz-linear-gradient(#8A3DE2, #9C4BF9);
		background: linear-gradient(#8A3DE2, #9C4BF9);
		border-radius: 1vw;
		padding: 4vw;
		box-shadow:0px 0px 5px #F2F2F2;
	}

	.cy_user_tit {
		width: 100%;
		height: 18vw;
		line-height: 8vw;
		display: block;
		float: left;
		text-align: left;
		margin-bottom: 2vw;
		border-bottom: 1px solid #fff;
		text-align: center;
		padding-bottom: 2vw;
	}

	.cy_user_into {
		width: 33.33%;
		height: auto;
		display: block;
		float: left;
		line-height: 7vw;
		display: block;
		float: left;
		margin: 2vw 0;
		text-align: center;
	}

	.cy_user_input {
		width: 20vw;
		height: 7vw;
		display: block;
		float: right;
		background: url(../../static/img/but.png)no-repeat top center;
		background-size: 100%;
		text-align: center;
		line-height: 7vw;
		margin: 1vw 0;
	}

	.cy_user_into text {
		margin-right: 2vw;
	}

	.cy_list {
		width: 90%;
		height: auto;
		display: block;
		float: left;
		margin: 2vw 5%;
		box-shadow: 0px 0px 5px #F2F2F2;
		border-radius: 1vw;
		padding: 4vw;
		background: #fff;
	}

	.cy_li {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		/* margin-bottom: 4vw; */
		border-bottom: 1px solid #F2F2F2;
		padding-bottom: 4vw;
	}

	.cy_li:last-child {
		border: none;
	}

	.cy_li image {
		width: 10vw;
		height: 10vw;
		display: block;
		float: left;
		margin: 2vw 0;
		border: ;
	}

	.cy_li_tit {
		width: 50%;
		height: 10vw;
		line-height: auto;
		display: block;
		float: left;
	}

	.cy_li_info {
		width: 100%;
		height: auto;
		line-height: 7vw;
		display: block;
		float: left;
	}

	.tri {
		text-align: right;
	}

	.cy_list_tit {
		width: 100%;
		height: auto;
		line-height: 12vw;
		display: block;
		float: left;
		text-align: center;
		background: #fff;
	}
	.cy_li_i{width: auto;margin:0 2vw;}
	.cy_li_i:first-child{margin-left: 0;}
	.cy_li_i:last-child{margin-right: 0;}
	.cy_li image.cy_li_info_img{width: 2vw;float: right;}
</style>
